{% extends "layouts/base-auth.html" %}
{% load static %}

{% block content %}
    <div class="flex flex-col items-center justify-center px-6 pt-8 mx-auto md:h-screen pt:mt-0 dark:bg-gray-900">
        <a href="/" class="flex items-center justify-center mb-8 text-2xl font-semibold lg:mb-10 dark:text-white">
            <img src="https://flowbite-admin-dashboard.vercel.app/images/logo.svg" class="mr-4 h-11" alt="FlowBite Logo">
            <span>Rocket HTMX</span>  
        </a>
        <!-- Card -->
        <div class="w-full max-w-xl p-6 space-y-8 sm:p-8 bg-white rounded-lg shadow dark:bg-gray-800">
            <h2 class="text-2xl font-bold text-gray-900 dark:text-white">
                Sign IN
            </h2>
            <p>
                <span>ADMIN: admin / Pass12__</span>
                <br />
                <span>USER: test / Pass12__</span>
            </p>
            <form 
                class="mt-8 space-y-6" 
                method="post"
                hx-post="{% url 'signin' %}"
                hx-target="#main-container"
                hx-swap="innerHTML"
                hx-indicator="#loading-indicator"
                hx-on="htmx:beforeRequest:
                    document.getElementById('loading-indicator').classList.remove('hidden'); 
                    document.getElementById('login-text').classList.add('hidden');
                "
                hx-on="htmx:afterRequest:
                    document.getElementById('loading-indicator').classList.add('hidden'); 
                    document.getElementById('login-text').classList.remove('hidden');
                "
            >
                {% csrf_token %}

                {% if form.non_field_errors %}
                    {% for error in form.non_field_errors %}
                        <div class="flex items-center p-4 mb-4 text-sm text-red-800 border border-red-300 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400 dark:border-red-800" role="alert">
                            <svg class="flex-shrink-0 inline w-4 h-4 mr-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
                            </svg>
                            <span class="sr-only">Info</span>
                            <div>
                                {{ error }}
                            </div>
                        </div>
                    {% endfor %}
                {% endif %}
                {% for field in form %}
                    <div>
                        <label for="{{ field.name }}" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ field.label }}</label>
                        {{ field }}
                        {% if field.errors %}
                            <div class="text-sm text-red-600 dark:text-red-400">
                                {{ field.errors }}
                            </div>
                        {% endif %}
                    </div>
                {% endfor %}

                <div class="flex items-start">
                    <div class="flex items-center h-5">
                        <input id="remember" aria-describedby="remember" name="remember" type="checkbox" 
                               class="w-4 h-4 border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:focus:ring-primary-600 dark:ring-offset-gray-800 dark:bg-gray-700 dark:border-gray-600">
                    </div>
                    <div class="ml-3 text-sm">
                    <label for="remember" class="font-medium text-gray-900 dark:text-white">Remember me</label>
                    </div>
                    <a href="{% url "password_reset" %}" class="ml-auto text-sm text-primary-700 hover:underline dark:text-primary-500">Lost Password?</a>
                </div>
                <button type="submit" class="w-full px-5 py-3 text-base font-medium text-center text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
                    <span id="loading-indicator" class="htmx-indicator hidden">Loading...</span>
                    <span id="login-text">Login to your account</span>
                </button>
                <div class="text-sm font-medium text-gray-500 dark:text-gray-400">
                    <button 
                        hx-get="{% url 'signup' %}" 
                        hx-target="#main-container" 
                        hx-swap="innerHTML"
                        class="text-primary-700 hover:underline dark:text-primary-500"
                    >
                        Register
                    </button>
                    &nbsp; &bull; &nbsp; 
                    <a href="https://app-generator.dev/docs/products/django/rocket-htmx/index.html"
                       class="text-primary-700 hover:underline dark:text-primary-500">Documentation</a>
                </div>
            </form>
        </div>
    </div>
{% endblock content %}